<template>
    <div class="mainSlot" ref="mainSlot">
        <div class="searchForm" ref="searchForm" v-if="$slots.searchForm">
            <slot name="searchForm" />
        </div>
        <div class="btnList" ref="btnList" v-if="$slots.btnList">
            <slot name="btnList" />
        </div>
        <div class="content" ref="content" v-if="$slots.content">
            <slot name="content" />
        </div>
        <div class="dialogModule" ref="dialogModule" v-if="$slots.dialogModule">
            <slot name="dialogModule" />
        </div>
    </div>
</template>

<script>

export default {

    data() {
        return {}
    },
    mounted() {
        this.getMoudleHeight();
    },
    methods: {
        getMoudleHeight() {
            let mainSlot_H = this.$refs.mainSlot?.clientHeight || 0;
            let searchForm_H = this.$refs.searchForm?.clientHeight || 0;
            let btnList_H = this.$refs.btnList?.clientHeight || 0;
            console.log(this.$refs.content, mainSlot_H - searchForm_H - btnList_H)
            this.$refs.content.style.height = mainSlot_H - searchForm_H - btnList_H + 'px';
        }
    }
}
</script>
<style lang="scss" scoped>
.mainSlot {
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;

    .content,
    .btnList,
    .searchForm {
        border: 1px solid #f6f6f6;
        box-sizing: border-box;
    }
}
</style>